<template>
  <div class="app-container">
    <el-card>
      <div slot="header" class="clearfix">
        <span>运单详情</span>
        <el-button
          style="float: right;"
          type="primary"
          icon="el-icon-arrow-left"
          size="mini"
          @click="handleBack"
        >返回</el-button>
      </div>

      <!-- 基本信息 -->
      <el-card shadow="never" class="mb-20">
        <div slot="header" class="clearfix">
          <span>基本信息</span>
        </div>
        <el-form ref="form" :model="form" label-width="120px" class="detail-form">
          <el-row :gutter="20">
            <el-col :span="6">
              <el-form-item label="车牌号：">
                <span>{{ form.licensePlate || '-' }}</span>
              </el-form-item>
            </el-col>
<!--            <el-col :span="6">-->
<!--              <el-form-item label="发货方：">-->
<!--                <span>{{ form.sendoutCompany || '-' }}</span>-->
<!--              </el-form-item>-->
<!--            </el-col>-->
            <el-col :span="6">
              <el-form-item label="客户：">
                <span>{{ form.receiveCompany || '-' }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="计划名称：">
                <span>{{ form.planName || '-' }}</span>
              </el-form-item>
            </el-col>
<!--            <el-col :span="6">-->
<!--              <el-form-item label="预约码：">-->
<!--                <span>{{ form.pickCode || '-' }}</span>-->
<!--              </el-form-item>-->
<!--            </el-col>-->
          </el-row>

          <el-row :gutter="20">
            <el-col :span="6">
              <el-form-item label="司机：">
                <span>{{ form.driverName || '-' }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="身份证号：">
                <span>{{ form.driverIdCard || '-' }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="派车时间：">
                <span>{{ form.dispatchtime || '-' }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="签到时间：">
                <span>{{ form.signintime || '-' }}</span>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="6">
              <el-form-item label="入场时间：">
                <span>{{ form.enterTime || '-' }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="完成时间：">
                <span>{{ form.finishTime || '-' }}</span>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-card>

      <!-- 货物明细 -->
      <el-card shadow="never" class="mb-20">
        <div slot="header" class="clearfix">
          <span>货物明细</span>
        </div>
        <el-table :data="goodsList" border style="width: 100%">
          <el-table-column type="index" label="序号" width="60" align="center" />
          <el-table-column prop="itemName" label="货物名称" min-width="120" />
          <el-table-column prop="itemModel" label="货物规格" min-width="120" />
          <el-table-column prop="itemPrice" label="货物单价" min-width="100" />
<!--          <el-table-column prop="quantityPerCar" label="每车吨数" min-width="100" />-->
<!--          <el-table-column prop="unit" label="计量方式" min-width="100" />-->
<!--          <el-table-column prop="packageType" label="包重类型" min-width="100" />-->
<!--          <el-table-column prop="packageNum" label="包数" min-width="80" />-->
<!--          <el-table-column prop="cube" label="立方数" min-width="80" />-->
<!--          <el-table-column prop="warehouseName" label="仓库名称" min-width="120" />-->
          <el-table-column prop="j" label="净重" min-width="100" />
<!--          <el-table-column prop="grossWeight" label="实际重量" min-width="100" />-->
          <el-table-column prop="p" label="皮重" min-width="100" />
          <el-table-column prop="m" label="毛重" min-width="100" />
<!--          <el-table-column prop="deductionWeight" label="扣重" min-width="100" />-->
          <el-table-column prop="totalTareCount" label="结算吨数" min-width="100" />
<!--          <el-table-column prop="cargoDamageAmount" label="货损金额" min-width="100" />-->
<!--          <el-table-column prop="priceType" label="价格类型" min-width="100" />-->
<!--          <el-table-column prop="settlementUnitPrice" label="结算单价" min-width="100" />-->
<!--          <el-table-column prop="transportUnitPrice" label="运费单价" min-width="100" />-->
<!--          <el-table-column prop="loadingFee" label="装卸费" min-width="100" />-->
<!--          <el-table-column prop="transportAmount" label="运费金额" min-width="100" />-->
          <el-table-column prop="mtime" label="皮重时间" min-width="160" />
          <el-table-column prop="ptime" label="毛重时间" min-width="160" />
          <el-table-column prop="ticketTime" label="打票时间" min-width="160" />
<!--          <el-table-column prop="finishTime" label="完成时间" min-width="160" />-->
          <el-table-column prop="paymentStatus" label="支付状态" min-width="120" />
<!--          <el-table-column prop="reservationStatus" label="预约状态" min-width="120" />-->
<!--          <el-table-column prop="loadingMethod" label="装卸方式" min-width="120" />-->
<!--          <el-table-column prop="loadingOrder" label="装卸顺序" min-width="120" />-->
        </el-table>
      </el-card>

      <!-- 经办与审核 -->
<!--      <el-card shadow="never">-->
<!--        <div slot="header" class="clearfix">-->
<!--          <span>经办与审核</span>-->
<!--        </div>-->
<!--        <el-form ref="auditForm" :model="form" label-width="120px" class="detail-form">-->
<!--&lt;!&ndash;          <el-row :gutter="20">&ndash;&gt;-->
<!--&lt;!&ndash;            <el-col :span="12">&ndash;&gt;-->
<!--&lt;!&ndash;              <el-form-item label="经办人：">&ndash;&gt;-->
<!--&lt;!&ndash;                <span>{{ form.handler || '-' }}</span>&ndash;&gt;-->
<!--&lt;!&ndash;              </el-form-item>&ndash;&gt;-->
<!--&lt;!&ndash;            </el-col>&ndash;&gt;-->
<!--&lt;!&ndash;            <el-col :span="12">&ndash;&gt;-->
<!--&lt;!&ndash;              <el-form-item label="经办人机构：">&ndash;&gt;-->
<!--&lt;!&ndash;                <span>{{ form.handlerOrg || '-' }}</span>&ndash;&gt;-->
<!--&lt;!&ndash;              </el-form-item>&ndash;&gt;-->
<!--&lt;!&ndash;            </el-col>&ndash;&gt;-->
<!--&lt;!&ndash;          </el-row>&ndash;&gt;-->

<!--          <el-row :gutter="20">-->
<!--&lt;!&ndash;            <el-col :span="12">&ndash;&gt;-->
<!--&lt;!&ndash;              <el-form-item label="单据日期：">&ndash;&gt;-->
<!--&lt;!&ndash;                <span>{{ form.documentDate || '-' }}</span>&ndash;&gt;-->
<!--&lt;!&ndash;              </el-form-item>&ndash;&gt;-->
<!--&lt;!&ndash;            </el-col>&ndash;&gt;-->
<!--            <el-col :span="12">-->
<!--              <el-form-item label="审核人：">-->
<!--                <span>{{ form.auditor || '-' }}</span>-->
<!--              </el-form-item>-->
<!--            </el-col>-->
<!--            <el-col :span="12">-->
<!--              <el-form-item label="审核时间：">-->
<!--                <span>{{ form.auditTime || '-' }}</span>-->
<!--              </el-form-item>-->
<!--            </el-col>-->
<!--          </el-row>-->

<!--&lt;!&ndash;          <el-row :gutter="20">&ndash;&gt;-->
<!--&lt;!&ndash;            <el-col :span="12">&ndash;&gt;-->
<!--&lt;!&ndash;              <el-form-item label="审核机构：">&ndash;&gt;-->
<!--&lt;!&ndash;                <span>{{ form.auditOrg || '-' }}</span>&ndash;&gt;-->
<!--&lt;!&ndash;              </el-form-item>&ndash;&gt;-->
<!--&lt;!&ndash;            </el-col>&ndash;&gt;-->
<!--&lt;!&ndash;            &ndash;&gt;-->
<!--&lt;!&ndash;          </el-row>&ndash;&gt;-->

<!--          <el-row :gutter="20">-->
<!--            <el-col :span="12">-->
<!--              <el-form-item label="核对人：">-->
<!--                <span>{{ form.checker || '-' }}</span>-->
<!--              </el-form-item>-->
<!--            </el-col>-->
<!--            <el-col :span="12">-->
<!--              <el-form-item label="核对时间：">-->
<!--                <span>{{ form.checkTime || '-' }}</span>-->
<!--              </el-form-item>-->
<!--            </el-col>-->
<!--          </el-row>-->
<!--        </el-form>-->
<!--      </el-card>-->
    </el-card>
  </div>
</template>

<script>
import { getWaybills } from "@/api/system/waybills"

export default {
  name: "WaybillsDetail",
  data() {
    return {
      form: {},
      goodsList: []
    }
  },
  created() {
    const id = this.$route.params.id
    this.fetchDetail(id)
  },
  methods: {
    async fetchDetail(id) {
      try {
        const res = await getWaybills(id)
        const data = res.data

        // 填充基本信息
        this.form = {
          sendoutCompany: data.sendoutCompany,
          receiveCompany: data.receiveCompany,
          planName: data.planName,
          contractName: data.contractName,
          pickCode: data.pickCode,
          licensePlate: data.licensePlate,
          driverIdCard: data.driverIdCard,
          carType: data.carType,
          driverName: data.driverName,
          carrierCompany: data.carrierCompany,
          dispatchtime: data.dispatchtime,
          signintime: data.signintime,
          enterTime: data.enterTime,
          businessType: data.businessType,
          handler: data.handler,
          handlerOrg: data.handlerOrg,
          documentDate: data.documentDate,
          auditor: data.auditor,
          auditOrg: data.auditOrg,
          auditTime: data.auditTime,
          checker: data.checker,
          checkTime: data.checkTime,
          finishTime: data.finishTime
        }

        // 填充货物明细
        this.goodsList = data.goodsList || []
      } catch (error) {
        console.error("获取详情失败:", error)
        this.$message.error("获取详情失败")
      }
    },
    handleBack() {
      this.$router.go(-1)
    }
  }
}
</script>

<style scoped>
.detail-form {
  margin-top: 20px;
}

.detail-form ::v-deep .el-form-item__content {
  color: #606266;
}

.detail-form ::v-deep .el-form-item {
  margin-bottom: 15px;
}

.mb-20 {
  margin-bottom: 20px;
}
</style>
